<template>
	<view class="login">
		<!--  #ifdef APP-PLUS -->
		<view class="nav-bar">
			<text class="iconfont icon-left" @tap="backup"></text>
			登录
		</view>
		<!--  #endif -->
		<block v-for="(item, index) in permInfo.common" :key="index">
			<!-- 微信登录 -->
			<view class="wechat-login" v-if="item.name === 'isShelf' && item.status === 1">
				<image class="login-bg" mode="widthFix" src="@/static/images/common/login-bg.png" />

				<view class="submit" @tap="wechatLogin"
					><text class="iconfont icon-weixin"></text>微信一键登录</view
				>
				<view class="desc"
					>登录即同意<text class="text" @tap="$Router.push('/pages/member/agreement')"
						>《软件使用及用户协议》</text
					>和<text class="text" @tap="$Router.push('/pages/member/policy')"
						>《隐私政策》</text
					></view
				>
			</view>

			<!-- 手机号登录 -->
			<view class="phone-login" v-if="item.name === 'isShelf' && item.status === 0">
				<view class="img-box">
					<image class="image" mode="widthFix" src="@/static/icons/logo.png" />
				</view>

				<view class="form-item">
					<input
						class="input"
						type="number"
						:value="phone"
						@input="changePhone"
						placeholder="手机号"
						maxlength="11"
						placeholder-class="placeholder"
					/>
					<view class="get-code" @tap="getMsgCode">
						{{ msg }}
					</view>
				</view>
				<view class="form-item">
					<input
						class="input"
						type="number"
						:value="code"
						@input="changeCode"
						placeholder="短信验证码"
						maxlength="6"
						placeholder-class="placeholder"
					/>
				</view>
				<view class="submit" @tap="submit">登录或注册</view>
				<view class="desc">未注册嗨返账户用户可点击按钮直接注册</view>
			</view>
		</block>
		<!-- 无功能权限时默认展示 -->
		<template v-if="!permInfo.common">
			<!-- 手机号登录 -->
			<view class="phone-login">
				<view class="img-box">
					<image class="image" mode="widthFix" src="@/static/icons/logo.png" />
				</view>

				<view class="form-item">
					<input
						class="input"
						type="number"
						:value="phone"
						@input="changePhone"
						placeholder="手机号"
						maxlength="11"
						placeholder-class="placeholder"
					/>
					<view class="get-code" @tap="getMsgCode">
						{{ msg }}
					</view>
				</view>
				<view class="form-item">
					<input
						class="input"
						type="number"
						:value="code"
						@input="changeCode"
						placeholder="短信验证码"
						maxlength="6"
						placeholder-class="placeholder"
					/>
				</view>
				<view class="submit" @tap="submit">登录或注册</view>
				<view class="desc">未注册嗨返账户用户可点击按钮直接注册</view>
			</view>
		</template>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'login',
	data() {
		return {
			options: {},
			phone: '',
			code: '',
			inviteCode: 'A888',
			qrCountDown: null,
			qrCountTime: 0,
			msg: '获取验证码'
		};
	},
	computed: {
		...mapGetters(['permInfo'])
	},
	onLoad(options) {
		this.options = options;
	},
	onShow() {
		uni.removeStorageSync('token');
	},
	methods: {
		wechatLogin() {
			let all;
			let Service;
			plus.oauth.getServices(
				Services => {
					all = Services;
					Object.keys(all).some(key => {
						if (all[key].id == 'weixin') {
							Service = all[key];
						}
					});
					Service.authorize(
						e => {
							this.login(e.code);
						},
						err => {
							uni.showToast({
								title: err.message,
								icon: 'none'
							});
						}
					);
				},
				err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				}
			);
		},
		login(code) {
			let params = {
				code: code
			};
			this.$service.common.userHf
				.loginWx(params)
				.then(res => {
					console.log(res.token)
					uni.setStorageSync('token', res.token);
					this.equipmentInfo(res.token);
					// 获取用户信息
					// #ifdef H5
					this.$store.dispatch('getUserInfo', { versionCode: 140 });
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						let params = { ...wgtinfo };
						this.$store.dispatch('getUserInfo', params);
					});
					// #endif
					
					// 消息红点
					this.$service.news.notices
						.page({
							page: 1,
							size: 2
						})
						.then(res => {
							uni.hideTabBarRedDot({ index: 2 });
							res.list.forEach(item => {
								if (item.status === 0) {
									uni.showTabBarRedDot({ index: 2 });
								}
							})
						})
						
					uni.navigateBack({
						delta: 1,
						animationType: 'pop-out',
						animationDuration: 200
					});
				})
				.catch(err => {
					console.log(err)
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		equipmentInfo(token) {
			// 静默上报设备信息
			let deviceInfo = {
				token: token
			};
			deviceInfo.cid = plus.push.getClientInfo().clientid;
			let os = plus.os.name;
			if (os === 'Android') {
				deviceInfo.os = 0;
			} else {
				deviceInfo.os = 1;
			}
			plus.device.getInfo({
				success: e => {
					if (os === 'Android') {
						deviceInfo.channel = plus.runtime.channel || 'other';
					} else {
						deviceInfo.channel = 'ios';
					}
					deviceInfo.uuid = e.uuid;
					deviceInfo.imei = e.imei;
					deviceInfo.imsi = e.imsi.join(',');

					this.$service.common.equipmentInfo
						.add(deviceInfo)
						.then(res => {
							console.log(res);
						})
						.catch(err => {
							console.log(err);
						});
				},
				fail: e => {}
			});
		},
		backup() {
			if (this.options.intention === 'index') {
				this.$Router.pushTab('/pages/index/index');
			} else {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			}
		},
		changePhone(e) {
			this.phone = e.detail.value;
		},
		changeCode(e) {
			this.code = e.detail.value;
		},
		changeInviteCode() {
			this.inviteCode = e.detail.value;
		},
		getMsgCode() {
			uni.getNetworkType({
				success: res => {
					if (res.networkType === 'none') {
						uni.showToast({
							title: '无网络连接',
							icon: 'none'
						});
					} else {
						let isPhone = /^1(((5[0-35-9][0-9])|([34879][0-9]{2}))[0-9]{7})$/;
						if (!isPhone.test(parseInt(this.phone))) {
							uni.showToast({
								title: '请输入正确的手机号',
								icon: 'none'
							});
							return false;
						}
						if (this.qrCountTime === 0) {
							this.$service.common.common
								.getCode({
									phone: this.phone,
									app: 'uniapp',
									isSign: true
								})
								.then(res => {
									uni.showToast({
										title: res.msg
									});

									this.qrCountTime = 60;
									this.msg = this.qrCountTime + 's';
									this.qrCountDown = setInterval(() => {
										this.qrCountTime--;
										this.msg = this.qrCountTime + 's';
										if (this.qrCountTime === 0) {
											// 结束倒计时
											clearInterval(this.qrCountDown);
											this.msg = '重新获取';
										}
									}, 1000);
								})
								.catch(err => {
									uni.showToast({
										title: err.message,
										icon: 'none'
									});
								});
						}
					}
				}
			});
		},
		submit() {
			uni.getNetworkType({
				success: res => {
					if (res.networkType === 'none') {
						uni.showToast({
							title: '无网络连接',
							icon: 'none'
						});
					} else {
						let isPhone = /^1(((5[0-35-9][0-9])|([34879][0-9]{2}))[0-9]{7})$/;
						let isCode = /^\d{4}|\d{6}$/;
						if (!isPhone.test(parseInt(this.phone))) {
							uni.showToast({
								title: '请输入正确的手机号',
								icon: 'none'
							});
							return false;
						}
						if (!isCode.test(this.code)) {
							uni.showToast({
								title: '请输入有效验证码',
								icon: 'none'
							});
							return false;
						}
						if (!this.inviteCode) {
							uni.showToast({
								title: '请输入邀请码',
								icon: 'none'
							});
							return false;
						}

						this.$service.common.common
							.loginUniApp({
								app: 'uniapp',
								phone: this.phone,
								code: this.code,
								inviteCode: 'A888'
							})
							.then(res => {
								uni.setStorageSync('token', res.token);
								this.$store.dispatch('getUserInfo');

								uni.navigateBack({
									delta: 1,
									animationType: 'pop-out',
									animationDuration: 200
								});
							})
							.catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	background: #fff;
	height: 100vh;

	.nav-bar {
		background: $main-color;
		line-height: 80rpx;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		padding: 50rpx 20rpx 0;
		position: relative;

		.iconfont {
			position: absolute;
			left: 20rpx;
			font-size: 44rpx;
		}
	}

	.wechat-login {
		.login-bg {
			width: 100%;
			height: 558rpx;
		}

		.submit {
			width: 532rpx;
			height: 80rpx;
			background: $main-color;
			line-height: 80rpx;
			border-radius: 50rpx;
			color: #fff;
			font-size: 32rpx;
			margin: 388rpx auto 20rpx;

			@include flexBox(center, center);
			.icon-weixin {
				font-size: 40rpx;
				margin-right: 10rpx;
			}
		}

		.desc {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			color: #717076;

			.text {
				color: #0160f7;
			}
		}
	}

	.phone-login {
		padding-top: 100rpx;
		.img-box {
			width: 130rpx;
			height: 86rpx;
			margin: 0 auto;

			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.form-item {
			padding: 20rpx 0;
			width: 532rpx;
			margin: 60rpx auto 0;
			border-bottom: 2rpx solid #c9c9c9;
			@include flexBox(space-between);

			.input {
				flex: 1;
			}

			.get-code {
				font-size: 26rpx;
				color: $main-color;
			}

			.placeholder {
				color: #c9c9c9;
				font-size: 26rpx;
			}
		}

		.submit {
			width: 532rpx;
			height: 80rpx;
			background: $main-color;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			color: #fff;
			font-size: 32rpx;
			margin: 74rpx auto 20rpx;
		}

		.desc {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			color: #b7b5bf;
		}
	}
}
</style>
